Page({
  data: {
    // 地图相关
    longitude: 0,
    latitude: 0,
    markers: [],
    clinics: [], // 存储所有诊所详细信息
    clinicList: [], // 诊所名称列表
    
    // 表单数据
    name: '',
    phone: '',
    clinicIndex: null,
    appointmentDate: '',
    timeSlots: ['09:00-10:00', '10:00-11:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
    timeSlotIndex: null,
    remarks: '',
    
    // 状态控制
    minDate: '',
    showAvailabilityTip: false,
    availabilityTip: '',
    canSubmit: false,
    loading: false
  },

  onLoad() {
    // 设置最小日期为今天
    const today = this.formatDate(new Date());
    this.setData({
      minDate: today
    });
    
    // 获取当前位置
    this.getCurrentLocation();
    
    // 从后端获取诊所列表
    this.fetchClinics();
  },
  
  // 格式化日期为yyyy-mm-dd
  formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  },
  
  // 获取当前位置
  getCurrentLocation() {
    // 先检查是否已授权位置权限
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation']) {
          // 已授权，直接获取位置
          this.fetchLocation();
        } else if (res.authSetting['scope.userLocation'] === undefined) {
          // 首次授权，请求位置权限
          wx.authorize({
            scope: 'scope.userLocation',
            success: () => {
              // 授权成功，获取位置
              this.fetchLocation();
            },
            fail: () => {
              // 用户拒绝授权
              this.handleLocationAuthRejected();
            }
          });
        } else {
          // 用户已拒绝授权，引导用户去设置页面打开权限
          this.handleLocationAuthRejected();
        }
      },
      fail: (err) => {
        console.error('获取设置失败', err);
        wx.showToast({
          title: '无法检查位置权限设置',
          icon: 'none'
        });
      }
    });
  },
  
  // 获取位置信息
  fetchLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        });
        console.log('获取位置成功', res);
      },
      fail: (err) => {
        console.error('获取位置失败', err);
        wx.showToast({
          title: '无法获取位置信息',
          icon: 'none'
        });
      }
    });
  },
  
  // 处理位置权限被拒绝的情况
  handleLocationAuthRejected() {
    wx.showModal({
      title: '位置权限',
      content: '需要获取您的位置信息以显示附近的诊所',
      showCancel: true,
      cancelText: '取消',
      confirmText: '去授权',
      success: (res) => {
        if (res.confirm) {
          // 引导用户去设置页面打开权限
          wx.openSetting({
            success: (res) => {
              if (res.authSetting['scope.userLocation']) {
                // 用户在设置中开启了权限
                this.fetchLocation();
              } else {
                wx.showToast({
                  title: '未开启位置权限，将使用默认位置',
                  icon: 'none'
                });
                // 设置默认位置（北京天安门附近）
                this.setData({
                  longitude: 116.4074,
                  latitude: 39.9042
                });
              }
            }
          });
        } else {
          // 用户点击取消，使用默认位置
          wx.showToast({
            title: '未开启位置权限，将使用默认位置',
            icon: 'none'
          });
          // 设置默认位置（北京天安门附近）
          this.setData({
            longitude: 116.4074,
            latitude: 39.9042
          });
        }
      }
    });
  },
  
  // 从后端获取诊所信息
  fetchClinics() {
    // 获取baseUrl，添加默认值作为备选
    // const baseUrl = getApp().globalData.baseUrl || 'http://localhost:8080';
    
    // 模拟数据，用于本地开发测试
    const mockClinics = [
      {
        id: 1,
        clinic_name: '牙护优口腔诊所（西单店）',
        longitude: 116.3683,
        latitude: 39.9111,
        address: '北京市西城区西单北大街120号',
        phone: '010-12345678'
      },
      {
        id: 2,
        clinic_name: '牙护优口腔诊所（朝阳店）',
        longitude: 116.4668,
        latitude: 39.9209,
        address: '北京市朝阳区建国路88号',
        phone: '010-87654321'
      },
      {
        id: 3,
        clinic_name: '牙护优口腔诊所（海淀店）',
        longitude: 116.3296,
        latitude: 39.9612,
        address: '北京市海淀区中关村大街1号',
        phone: '010-66668888'
      }
    ];
    
//     wx.request({
//       url: baseUrl + '/clinic-location/all',
//       method: 'GET',
//       success: (res) => {
//         if (res.statusCode === 200 && res.data) {
//           const clinics = res.data;
//           const clinicList = clinics.map(clinic => clinic.clinic_name);
          
//           // 构建地图标记
//           const markers = clinics.map((clinic, index) => ({
//             id: clinic.id,
//             longitude: clinic.longitude,
//             latitude: clinic.latitude,
//             title: clinic.clinic_name,
//             iconPath: '/assets/images/public/店铺.png', // 使用项目中已有的店铺图标
//             width: 30,
//             height: 30
//           }));
          
//           this.setData({
//             clinics,
//             clinicList,
//             markers
//           });
//         } else {
//           wx.showToast({
//             title: '获取诊所信息失败，使用模拟数据',
//             icon: 'none'
//           });
//           // 使用模拟数据
//           this.useMockData(mockClinics);
//         }
//       },
//       fail: (err) => {
//         console.error('获取诊所失败，使用模拟数据', err);
//         wx.showToast({
//           title: '网络错误，使用模拟数据',
//           icon: 'none'
//         });
//         // 使用模拟数据
//         this.useMockData(mockClinics);
//       }
//     });
  },
  
  // 使用模拟数据
  useMockData(mockClinics) {
    const clinicList = mockClinics.map(clinic => clinic.clinic_name);
    
    // 构建地图标记
    const markers = mockClinics.map((clinic) => ({
      id: clinic.id,
      longitude: clinic.longitude,
      latitude: clinic.latitude,
      title: clinic.clinic_name,
      iconPath: '/assets/images/public/店铺.png', // 使用项目中已有的店铺图标
      width: 30,
      height: 30
    }));
    
    this.setData({
      clinics: mockClinics,
      clinicList,
      markers
    });
  },
  
  // 检查时间段是否可用
  checkTimeSlotAvailability() {
    const { appointmentDate, timeSlotIndex, timeSlots } = this.data;
    
    if (!appointmentDate || timeSlotIndex === null) return;
    
    const timeSlot = timeSlots[timeSlotIndex];
    
    wx.request({
      url: getApp().globalData.baseUrl + '/appointment/check-availability',
      method: 'GET',
      data: {
        date: appointmentDate,
        timeSlot: timeSlot
      },
      success: (res) => {
        if (res.statusCode === 200) {
          const isAvailable = res.data;
          this.setData({
            showAvailabilityTip: true,
            availabilityTip: isAvailable ? '该时间段可用' : '该时间段已约满，请选择其他时间',
            canSubmit: isAvailable && this.validateForm()
          });
        }
      },
      fail: (err) => {
        console.error('检查时间段失败', err);
      }
    });
  },
  
  // 表单验证
  validateForm() {
    const { name, phone, clinicIndex, appointmentDate, timeSlotIndex } = this.data;
    
    // 简单验证
    if (!name.trim()) return false;
    if (!phone.trim() || phone.length !== 11) return false;
    if (clinicIndex === null) return false;
    if (!appointmentDate) return false;
    if (timeSlotIndex === null) return false;
    
    return true;
  },
  
  // 表单输入处理
  onNameInput(e) {
    this.setData({ name: e.detail.value }, () => {
      this.setData({ canSubmit: this.validateForm() });
    });
  },
  
  onPhoneInput(e) {
    this.setData({ phone: e.detail.value }, () => {
      this.setData({ canSubmit: this.validateForm() });
    });
  },
  
  onClinicChange(e) {
    const index = e.detail.value;
    this.setData({ clinicIndex: index }, () => {
      // 切换选中的诊所标记
      if (this.data.clinics[index]) {
        const clinic = this.data.clinics[index];
        this.setData({
          longitude: clinic.longitude,
          latitude: clinic.latitude
        });
      }
      this.setData({ canSubmit: this.validateForm() });
    });
  },
  
  onDateChange(e) {
    this.setData({ 
      appointmentDate: e.detail.value,
      timeSlotIndex: null,
      showAvailabilityTip: false
    }, () => {
      this.setData({ canSubmit: this.validateForm() });
    });
  },
  
  onTimeSlotChange(e) {
    this.setData({ timeSlotIndex: e.detail.value }, () => {
      this.checkTimeSlotAvailability();
    });
  },
  
  onRemarkInput(e) {
    this.setData({ remarks: e.detail.value });
  },
  
  // 地图标记点击事件
  onMarkerTap(e) {
    const markerId = e.markerId;
    // 找到对应的诊所并更新选择
    const clinicIndex = this.data.clinics.findIndex(clinic => clinic.id === markerId);
    if (clinicIndex !== -1) {
      this.setData({ clinicIndex });
    }
  },
  
  // 提交预约
  onSubmit() {
    if (!this.data.canSubmit) return;
    
    const { name, phone, clinicIndex, appointmentDate, timeSlotIndex, timeSlots, remarks, clinics } = this.data;
    
    const appointmentData = {
      name: name.trim(),
      phone: phone.trim(),
      clinic_name: clinics[clinicIndex].clinic_name,
      appointment_date: appointmentDate,
      time_slot: timeSlots[timeSlotIndex],
      remarks: remarks.trim()
    };
    
    this.setData({ loading: true });
    
    wx.request({
      url: getApp().globalData.baseUrl + '/appointment',
      method: 'POST',
      data: appointmentData,
      header: {
        'Content-Type': 'application/json'
      },
      success: (res) => {
        this.setData({ loading: false });
        
        if (res.statusCode === 200) {
          wx.showToast({
            title: '预约成功',
            icon: 'success',
            duration: 2000
          });
          
          // 重置表单
          setTimeout(() => {
            this.setData({
              name: '',
              phone: '',
              clinicIndex: null,
              appointmentDate: '',
              timeSlotIndex: null,
              remarks: '',
              showAvailabilityTip: false,
              canSubmit: false
            });
          }, 2000);
        } else {
          wx.showToast({
            title: '预约失败，请重试',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        console.error('提交预约失败', err);
        this.setData({ loading: false });
        wx.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      }
    });
  }
});